import React, { Component } from 'react';
import {NavLink,Route,Link} from 'react-router-dom'
import styled from 'styled-components'
import HomeMain from '../homemain'
import DutyFree from '../dutyfree'
import Luxury from '../luxury'
import MonBaby from '../monbaby'
import NameProduct from '../name_product'
import {themaColor} from '../../../assets/thema/index'
import '../../../static/iconfont.css'
import BScroll from 'better-scroll'
const HomeContair=styled.div`
    flex:1;
    overflow:hidden;
    .header_search{
        background:#fff;
        height:.4569rem;
        display:flex;
        align-items:center;
        .search-box{
            width:3rem;
            height:.31rem;
            line-height:.31rem;
            border-radius:0.25rem;
            background:#F5F5F5;
            text-align:center;
            margin:0 .16rem 0 .2rem;
            color:#999;
            font-size:14px
        }
        img{
            width:.265rem
        }
    }
    .header_nav{
        background:#fff
        font-size: 14px;
        height:.44rem;
        border-bottom:1px solid #eee
        // width:415px
        ul{
            display:flex;
            height:100%;
            line-height:.44rem;
            a{
                width:auto;
                color:#666
                margin:0 .15rem;
                &.active{
                    color:${themaColor};
                    border-bottom:2px solid ${themaColor}
                }
            }
        }

    }
    .gotop{
        height:.4rem;
        width:.4rem;
        text-align:center;
        line-height:.4rem;
        position: fixed;
        bottom:.55rem;
        right:.15rem;
        color:#666;
        z-index:666;
        border:1px solid #666
        border-radius: 50%;
    }
`

class Home extends Component{
    constructor(){
        super()
        this.state={

        }
    }

    componentDidMount(){
        document.title = '聚美优品触屏版'
        setTimeout(() => {
            this.bscroll=new BScroll(this.homecontair,{
                click: true,
                pullUpLoad: {
                    threshold: 50  //可以配置离（threshold）来决定开始加载的时机
                },
                probeType: 1,
                mouseWheel: {    // 鼠标滚轮上滑
                    speed: 20,
                },
            })
        }, 0);
    }

    goTop = () => {  //点击回到顶部
        this.bscroll.scrollTo(0,0,600)
     }

    render(){
        return(
                <HomeContair ref={el=>this.homecontair=el}>
                    <div>
                        <Link to='/search' className='header_search'>
                            <div className='search-box'>
                                <i className='iconfont'>&#xe615;</i>
                                <span>搜索商品 分类 功效</span>
                            </div>
                            {/* <i className='iconfont'>&#xe615;</i> */}
                            <img alt='显示出错' src='//f0.jmstatic.com/btstatic/h5/index/search_list2.png'></img>
                        </Link>
                        <div className='header_nav'>
                            <ul>
                                <NavLink to='/home/homemain/today' activeClassName='active'>首页</NavLink>
                                <NavLink to='/home/dutyfree' activeClassName='active'>极速免税店</NavLink>
                                <NavLink to='/home/monbaby' activeClassName='active'>母婴</NavLink>
                                <NavLink to='/home/luxury' activeClassName='active'>轻奢</NavLink>
                                <NavLink to='/home/nameproduct' activeClassName='active'>品牌特卖</NavLink>
                            </ul>
                        </div>
                        
                        {/* 回到顶部 */}
                        <div className='gotop' onClick={this.goTop}>
                            <i className="fa fa-chevron-up"></i>
                        </div>


                        <div className='router-box'>
                            <Route path='/home/homemain' component={HomeMain}></Route>
                            <Route path='/home/dutyfree' component={DutyFree}></Route>
                            <Route path='/home/luxury' component={Luxury}></Route>
                            <Route path='/home/monbaby' component={MonBaby}></Route>
                            <Route path='/home/nameproduct' component={NameProduct}></Route>
                        </div>
                    </div>
                    
                </HomeContair>
        )
    }
}

export default Home